import React, { Component } from 'react';
import './style.css';
import PropTypes from 'prop-types';
//当父组件的render重新渲染时，子组件的render也会重新执行
class TodoItem extends Component {

    constructor(props) {
        super(props);
        this.handleItemDelete = this.handleItemDelete.bind(this);
    }
    //性能优化,可以减少不必要的渲染
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.content !== this.props.content) {
            return true;
        } else {
            return false;
        }
    }

    render() {
        const {content} = this.props;
        return (
            <div onClick={this.handleItemDelete}>
            {content}
          </div>
        )
    }

    handleItemDelete() {
        const {deleteItem, index, test} = this.props;
        deleteItem(index)
    }

}

TodoItem.propTypes = { //错了的话只会警告，不会阻止程序运行
    test: PropTypes.string.isRequired, //必须传
    content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    deleteItem: PropTypes.func,
    index: PropTypes.number
}

TodoItem.defaultProps = { //错了的话只会警告，不会阻止程序运行
    test: 'hello' //默认值
}

export default TodoItem;